// 1.class 的基本用法 继承和类型约束 implements
// 2.class 的修饰符 readonly  private protected public
// readonly 只读,属性上用  private 私有的，只能类内部调用
// protected 只能类内部和子类用  public 公共的，外部也可以调用
// 3.super原理   父类的prototype.constructor.call 传参
// 4.静态方法
// 5.get set


// interface Options {
//     el: string | HTMLElement
// }
// interface VueCls {
//     options: Options,
//     init(): void
// }
// interface VNode {
//     tag: string
//     text?: string
//     children?: VNode[]
// }
// // 虚拟dom
// class Dom {
//     constructor() { }
//     createElement(el: string) {
//         return document.createElement(el)
//     }
//     setText(el: Element, text: string | null) {
//         el.textContent = text
//     }
//     // 渲染函数
//     protected render(data: VNode): HTMLElement {
//         let root = document.createElement(data.tag)
//         if (data.children && Array.isArray(data.children)) {
//             data.children.forEach((item) => {
//                 let child = this.render(item)
//                 root.appendChild(child)
//             })
//         } else {
//             this.setText(root, data.text||null)
//         }
//         return root
//     }
// }
// class Vue extends Dom implements VueCls {
//     options: Options
//     constructor(options: Options) {
//         super()
//         this.options = options
//         this.init()
//     }
//     static xxx(){

//     }
//     // 静态方法，只能类本身调用，且不能调用类中其它非静态
//     static version(){
//         this.xxx()
//         return '1.0.0'
//     }
//     init(): void {
//         let data: VNode = {
//             tag: 'div',
//             text: '我是父节点',
//             children: [
//                 {
//                     tag: 'div',
//                     text: '我是子节点1',
//                     children: [
//                         {
//                             tag: 'div',
//                             text: '我是孙子节点1',
//                         }, 
//                         {
//                             tag: 'div',
//                             text: '我是孙子节点2',
//                         }
//                     ]
//                 }, 
//                 {
//                     tag: 'div',
//                     text: '我是子节点2',
//                 },
//                 {
//                     tag: 'div',
//                     text: '我是子节点3',
//                 }
//             ]
//         }
//         let app = typeof this.options.el === 'string' ? document.querySelector(this.options.el) : this.options.el
//         app?.appendChild(this.render(data))
//     }
// }

// new Vue({
//     el: '#app'
// })


class Ref{
    _value:any
    constructor(value:any){
        this._value = value
    }
    get value(){
        return this._value
    }
    set value(newValue){
        this._value = newValue+'11'
    }
}
const ref = new Ref('wyx')
ref.value = ref.value+'帅哥'
console.log(ref.value)

